<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
	<th:block th:include="include :: header('新增运费模板')" />
</head>

<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-freight-add">
			<h4 class="form-header h4">运费模板</h4>
			<div class="row">
				<div class="form-group">
					<label class="col-sm-4 control-label is-required">模板名称：</label>
					<div class="col-sm-5">
						<input name="freightName" class="form-control" type="text" required>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="form-group">
					<label class="col-sm-4 control-label">计费类型：</label>
					<div class="col-sm-8">
						<div class="radio-box" th:each="dict : ${@dict.getType('shop_charge_type')}">
							<input type="radio" th:id="${dict.dictCode}" name="chargeType" th:value="${dict.dictValue}"
								th:checked="${dict.default}"> <label th:for="${dict.dictCode}"
								th:text="${dict.dictLabel}"></label>
						</div>
					</div>

				</div>
			</div>
			<h4 class="form-header h4">计费方式</h4>
			<div class="row">
				<div class="col-sm-12 select-table table-striped">
					<table id="bootstrap-table"></table>
				</div>
			</div>
		</form>
	</div>
	<th:block th:include="include :: footer" />
	<script th:inline="javascript">
		var prefix = ctx + "shop/freight"
		$("#form-freight-add").validate({
			focusCleanup: true
		});
		
		var chargeType=0;
		var data = [{
			firstNum: 0.0,
			firstFreight: 0.0,
			continueNum: 0.0,
			continueFreight: 0.0
		}];
		$(function () {
			$("input[name='chargeType']").on("ifChecked", function(event) {
				chargeType = $(event.target).val();
				if (chargeType == 0) {
					  $('#bootstrap-table').bootstrapTable('updateColumnTitle', {field: 'firstNum',title: '首重(kg)'})
					  $('#bootstrap-table').bootstrapTable('updateColumnTitle', {field: 'continueNum',title: '续重(kg)'})
				} else if (chargeType == 1) {
					  $('#bootstrap-table').bootstrapTable('updateColumnTitle', {field: 'firstNum',title: '首件(件)'})
					  $('#bootstrap-table').bootstrapTable('updateColumnTitle', {field: 'continueNum',title: '续件(件)'})
				} else if (chargeType == 2) {
					  $('#bootstrap-table').bootstrapTable('updateColumnTitle', {field: 'firstNum',title: '首体积(m³)'})
					  $('#bootstrap-table').bootstrapTable('updateColumnTitle', {field: 'continueNum',title: '续体积(m³)'})
				}
			});
			var options = {
				id:'bootstrap-table',
				data: data,
				pagination: false,
				showSearch: false,
				showRefresh: false,
				showToggle: false,
				showColumns: false,
				sidePagination: "client",
				columns: [
					{
						field: 'firstNum',
						align: 'center',
						title: '首重(kg)',
						formatter: function (value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='number' name='firstNum' value='%s'>", value);
							return html;
						}
					},
					{
						field: 'firstFreight',
						align: 'center',
						title: '首费(元)',
						formatter: function (value, row, index) {
							var html = $.common.sprintf("<input class='form-control price' type='number' name='firstFreight' value='%s'>", value);
							return html;
						}
					},
					{
						field: 'continueNum',
						align: 'center',
						title: '续重(kg)',
						formatter: function (value, row, index) {
							var html = $.common.sprintf("<input class='form-control cost' type='number' name='continueNum' value='%s'>", value);
							return html;
						}
					},
					{
						field: 'continueFreight',
						align: 'center',
						title: '续费(元)',
						formatter: function (value, row, index) {
							var html = $.common.sprintf("<input class='form-control marketPrice' type='number' name='continueFreight' value='%s'>", value);
							return html;
						}
					}]
			};
			$.table.init(options);
		});

		function submitHandler() {
			if ($.validate.form()) {
				$.operate.save(prefix + "/add", $('#form-freight-add').serialize());
			}
		}

	</script>
</body>

</html>